<template>
  <el-container class="main_con" style="padding-bottom:0px">
    <ufrom @submit="saveData" ref="ufrom">
      <el-form size="medium" label-width="100px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="微信公众号" name="wx">
            <div class="setting_body_item">
              <div class="header" style="margin-top:20px">微信支付</div>
              <div class="conetnt edit_con">
                <div class="edit_content">
                  <el-form-item label="微信支付">
                    <el-radio-group v-model="obj.configuration.wechat.wx">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="" v-if="obj.configuration.wechat.wx == 1">
                    <div class="fks">
                      支付模板：
                      <el-select v-model="obj.configuration.wechat.wx_pay_mode_id" placeholder="请选择" style="width:250px">
                        <el-option v-for="item in tlwx" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                      <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>

                      <router-link tag="a" target="_blank" to="/finance/pay/payTemplateItem" style="margin-left:10px"><el-button type="text">添加模板</el-button></router-link>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>

            <!--       <div class="setting_body_item">
                <div class="header">支付宝支付</div>
                <div class="conetnt edit_con">
                  <div class="edit_content">
                    <el-form-item label="支付宝支付">
                      <el-radio-group v-model="obj.configuration.wechat.ali">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="" v-if="obj.configuration.wechat.ali == 1">
                      <div class="fks">
                        支付模板：
                        <el-select v-model="obj.configuration.wechat.ali_pay_mode_id" placeholder="请选择" style="width:250px">
                          <el-option
                            v-for="item in tlali"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>

                        <router-link tag="a" target="_blank" to="/finance/pay/payTemplateItem" style="margin-left:10px">
                          <el-button type="text">添加模板</el-button>
                        </router-link>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div> -->

            <div class="setting_body_item">
              <div class="header">余额支付</div>
              <div class="conetnt edit_con">
                <div class="edit_content">
                  <el-form-item label="余额支付">
                    <el-radio-group v-model="obj.configuration.wechat.recharge">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="" v-if="obj.configuration.wechat.recharge == 1">
                    <div class="fks"><div style="color:#909399;font-size:12px;">开启后，粉丝可以用账户余额去商城消费</div></div>
                  </el-form-item>
                </div>
              </div>
            </div>

            <!--     <div class="setting_body_item">
                <div class="header">货到付款</div>
                <div class="conetnt edit_con">
                  <div class="edit_content">
                    <el-form-item label="货到付款">
                      <el-radio-group v-model="obj.configuration.wechat.sendPay">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="" v-if="obj.configuration.wechat.sendPay == 1">
                      <div class="fks">
                        <div style="color:#909399;font-size:12px;">
                          如果需支持货到付款，也需要将商品设置成货到付款
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div> -->
          </el-tab-pane>
          <el-tab-pane label="微信小程序" name="mp">
            <div class="setting_body_item">
              <div class="header" style="margin-top:20px">微信支付</div>
              <div class="conetnt edit_con">
                <div class="edit_content">
                  <el-form-item label="微信支付">
                    <el-radio-group v-model="obj.configuration.wechata.wx">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="" v-if="obj.configuration.wechata.wx == 1">
                    <div class="fks">
                      支付模板：
                      <el-select v-model="obj.configuration.wechata.wx_pay_mode_id" placeholder="请选择" style="width:250px">
                        <el-option v-for="item in tlwx" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                      <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>

                      <router-link tag="a" target="_blank" to="/finance/pay/payTemplateItem" style="margin-left:10px"><el-button type="text">添加模板</el-button></router-link>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>

            <div class="setting_body_item">
              <div class="header">余额支付</div>
              <div class="conetnt edit_con">
                <div class="edit_content">
                  <el-form-item label="余额支付">
                    <el-radio-group v-model="obj.configuration.wechata.recharge">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="" v-if="obj.configuration.wechata.recharge == 1">
                    <div class="fks"><div style="color:#909399;font-size:12px;">开启后，粉丝可以用账户余额去商城消费</div></div>
                  </el-form-item>
                </div>
              </div>
            </div>

            <!--   <div class="setting_body_item">
                <div class="header">货到付款</div>
                <div class="conetnt edit_con">
                  <div class="edit_content">
                    <el-form-item label="货到付款">
                      <el-radio-group v-model="obj.configuration.wechata.sendPay">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="" v-if="obj.configuration.wechata.sendPay == 1">
                      <div class="fks">
                        <div style="color:#909399;font-size:12px;">
                          如果需支持货到付款，也需要将商品设置成货到付款
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div> -->
          </el-tab-pane>
          <el-tab-pane label="浏览器Web H5" name="h5">
            <!--        <div class="setting_body_item">
                <div class="header" style="margin-top:0">支付宝支付</div>
                <div class="conetnt edit_con">
                  <div class="edit_content">
                    <el-form-item label="支付宝支付">
                      <el-radio-group v-model="obj.configuration.web.ali">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="" v-if="obj.configuration.web.ali == 1">
                      <div class="fks">
                        支付模板：
                        <el-select v-model="obj.configuration.web.ali_pay_mode_id" placeholder="请选择" style="width:250px">
                          <el-option
                            v-for="item in tlali"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>

                        <router-link tag="a" target="_blank" to="/finance/pay/payTemplateItem" style="margin-left:10px">
                          <el-button type="text">添加模板</el-button>
                        </router-link>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div> -->
            <div class="setting_body_item">
              <div class="header" style="margin-top:20px">微信支付</div>
              <div class="conetnt edit_con">
                <div class="edit_content">
                  <el-form-item label="微信支付">
                    <el-radio-group v-model="obj.configuration.web.wx">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="" v-if="obj.configuration.web.wx == 1">
                    <div class="fks">
                      支付模板：
                      <el-select v-model="obj.configuration.web.wx_pay_mode_id" placeholder="请选择" style="width:250px">
                        <el-option v-for="item in tlwx" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                      <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>

                      <router-link tag="a" target="_blank" to="/finance/pay/payTemplateItem" style="margin-left:10px"><el-button type="text">添加模板</el-button></router-link>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="setting_body_item">
              <div class="header">余额支付</div>
              <div class="conetnt edit_con">
                <div class="edit_content">
                  <el-form-item label="余额支付">
                    <el-radio-group v-model="obj.configuration.web.recharge">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="" v-if="obj.configuration.web.recharge == 1">
                    <div class="fks"><div style="color:#909399;font-size:12px;">开启后，粉丝可以用账户余额去商城消费</div></div>
                  </el-form-item>
                </div>
              </div>
            </div>

            <!--     <div class="setting_body_item">
                <div class="header">货到付款</div>
                <div class="conetnt edit_con">
                  <div class="edit_content">
                    <el-form-item label="货到付款">
                      <el-radio-group v-model="obj.configuration.web.sendPay">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="" v-if="obj.configuration.web.sendPay == 1">
                      <div class="fks">
                        <div style="color:#909399;font-size:12px;">
                          如果需支持货到付款，也需要将商品设置成货到付款
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div> -->
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </ufrom>
  </el-container>
</template>

<script>
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
import {getPayAll} from '@/api/mall/pay';
export default {
  data() {
    return {
      tlwx: [],
      tlali: [],
      activeName: 'wx',
      isLoading: false,
      obj: {
        type: 'mallPayMode',
        status: 1,
        configuration: {
          wechat: {
            wx: 0,
            wx_pay_mode_id: '',
            ali: 0,
            ali_pay_mode_id: '',
            recharge: 0,
            sendPay: 0
          },
          wechata: {
            wx: 0,
            wx_pay_mode_id: '',
            recharge: 0,
            sendPay: 0
          },
          web: {
            ali: 0,
            ali_pay_mode_id: '',
            recharge: 0,
            sendPay: 0
          }
        }
      }
    };
  },
  components: {},
  mounted() {
    //加载支付模板列表
    this.getTemplateAll();
    this.getConfig('mallPayMode');
  },
  methods: {
    //刷新模板
    refresh() {
      this.tlwx = [];
      this.tlali = [];
      this.getTemplateAll();
    },
    //获取模板列表(wx/alipay)
    getTemplateAll() {
      this.isLoading = true;
      getPayAll()
        .then(res => {
          this.isLoading = false;
          let l = res.msg;
          //封装微信支付模板列表,mode == 1
          //封装支付宝支付模板列表,mode == 2
          if (l.length) {
            l.forEach(e => {
              if (e.mode == 1 || e.mode == 3) {
                //wx
                this.tlwx.push({
                  label: e.name,
                  value: e.id
                });
              } else if (e.mode == 2) {
                //ali
                this.tlali.push({
                  label: e.name,
                  value: e.id
                });
              }
            });
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取站点配置数据
    getConfig(type) {
      this.isLoading = true;
      getSiteConfig(type)
        .then(res => {
          this.isLoading = false;
          if (res.msg) {
            this.obj = res.msg;
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //保存数据
    saveData() {
      this.isLoading = true;
      if (this.obj.update_time) {
        //更新
        editSiteConfig(this.obj)
          .then(res => {
            this.$refs.ufrom.init();
            this.getConfig('mallPayMode');
          })
          .catch(e => {
            this.$refs.ufrom.init();
          });
      } else {
        //新增
        addSiteConfig(this.obj)
          .then(res => {
            this.$refs.ufrom.init();
            this.getConfig('mallPayMode');
          })
          .catch(e => {
            this.$refs.ufrom.init();
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-scroll {
  padding-left: 20px;
}
</style>
